<template>
  <van-nav-bar
    :class="['common-nav', navStyleClass]"
    :title="title"
    :fixed="fixed"
    :placeholder="navPlaceholder"
    :border="navBorder"
    :left-arrow="leftArrow"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
</template>

<script>
// import bus from '@/utils/bus'
export default {
  name: 'ComHeader',
  props: {
    // 标题
    title: {
      type: String,
      default: (_) => '标题',
    },
    // 导航栏的样式，可选值透明transparent，默认white
    navStyle: {
      type: String,
      default: (_) => 'white'
    },
    // 是否固定
    fixed: {
      type: Boolean,
      default: true
    },
    // 是否显示固定后的占位
    placeholder: {
      type: Boolean,
      default: true
    },
    // 是否显示左边返回按钮
    leftArrow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    navStyle: {
      immediate: true,
      handler: function (value) {
        this.navStyleClass = `nav-${value}`
        if (value === 'transparent') {
          this.navPlaceholder = false
          this.navBorder = false
        } else {
          this.navPlaceholder = this.placeholder
          this.navBorder = true
        }
      }
    }
  },
  data () {
    return {
      // nav的样式类名
      navStyleClass: '',
      // 是否开启fixed固定后的占位
      navPlaceholder: false,
      // 是否显示下边框
      navBorder: true
    }
  },
  created () {
  },
  mounted () {
    // bus.$on('setBackFunc', (data) => {
    // })
  },
  computed: {},
  methods: {
    onClickLeft () {
      if (this.$store.getters.isInnerApp) {
        JSCallNative('goBack', {
          param: {},
          successCallBack: (data) => {
          },
          failedCallBack: (msg) => {
          }
        })
        // 如果是我的套餐跳转到首页
        // if (this.$route.name === 'activity-package-mine') {
        //   JSCallNative('jumpNativePage', {
        //     param: { page: 'tabbar' },
        //     successCallBack: (data) => {
        //     },
        //     failedCallBack: (msg) => {
        //     }
        //   })
        // } else {
        //   JSCallNative('goBack', {
        //     param: {},
        //     successCallBack: (data) => {
        //     },
        //     failedCallBack: (msg) => {
        //     }
        //   })
        // }
      } else {
        this.$router.go(-1)
      }
    },
    onClickRight () {
    },
  },
  // destroyed() {
  //   bus.$off('setBackFunc')
  // }
}
</script>
<style scoped lang="less">
.common-nav {
  z-index: 99;
  /deep/ .van-nav-bar {
    padding-top: var(--bar-height);
  }
  &.van-nav-bar {
    padding-top: var(--bar-height);
  }
  /deep/ .van-nav-bar__left {
    .van-nav-bar__arrow {
      font-size: 26px;
      color: #000;
      //font-weight: bold;
    }
  }
  /deep/ .van-nav-bar__title {
    font-size: 17px;
  }
}

.nav-transparent {
  background-color: transparent;
  border-bottom: none;

  /deep/ .van-nav-bar__content {
    .van-nav-bar__title, .van-nav-bar__left .van-icon {
      color: #fff;
    }
  }
}
</style>
<style lang="less">
  .van-nav-bar__placeholder {
    height: var(--top-height) !important;
  }
</style>
